<template>
  <div style="padding-bottom:50px" id='my_form' class="modify">
    <view-box body-padding-bottom="40" ref="viewBox">

      <div v-if='pageType!="baoming"' style="position: absolute;top: 0;max-width: 850px;width: 100%;" class='headerWarpper'>
        <x-header slot="header" :left-options="{backText: ''}" style="width:100%;position:fixed;left:0;top:0;z-index:100;" :title="project">
          <a href="./#/racelist" style="font-size:24px" slot="right">
            <i class="fa fa-home fa-fw"></i>
          </a>

        </x-header>
      </div>

      <Myheader v-if='pageType=="baoming"' id='type_baoming' :page="page"></Myheader>

      <card v-show="!show">
        <div slot="content" class="">
          <div style="padding-top:40px" id="form" v-show="!showLoading">

            <divider v-if="!show">{{formName}}</divider>

            <div v-show="!show" :key='index' v-for="(item, index) in form.fields">
              <!--header类型开始-->
              <div style="text-align: center" v-if="item.type=='header'">
                <h4>{{formDataArray[index].formData}}</h4>
              </div>
              <!--header类型结束-->

              <!--text类型开始-->

              <!--text-password密码-->

              <!--text-text文本输入-->
              <group v-if="item.type=='text'&&item.subtype=='text'">
                <!-- <group-title slot="title" class="group-title">
                  <span>{{item.label}}</span>
                  <span :class="isRequired(item.required)">*</span>
                </group-title> -->
                <x-input v-if='isRequired(item.required)=="required"' label-width="8em" :title='item.label+` <span style="color:red">*</span>`' type="text" :required="checkRequired(item.required)" :placeholder="item.description||item.label" placeholder-align="right" text-align="right" v-model='formDataArray[index].formData'>

                </x-input>
                <x-input v-if='isRequired(item.required)!="required"' label-width="8em" :title='item.label' type="text" :required="checkRequired(item.required)" :placeholder="item.description||item.label" placeholder-align="right" text-align="right" v-model='formDataArray[index].formData'></x-input>
              </group>

              <!--text-number数字-->

              <!--text-email电子邮箱-->
              <group v-if="item.type === 'text'&&item.subtype === 'email' ">

                <x-input v-if='isRequired(item.required)=="required"' label-width="8em" :title='item.label+`<span style="color:red"> *</span>`' is-type="email" type="email" :placeholder="item.description||item.label" placeholder-align="right" text-align="right" v-model='formDataArray[index].formData'></x-input>

                <x-input v-if='isRequired(item.required)!="required"' label-width="8em" :title='item.label' is-type="email" type="email" :placeholder="item.description||item.label" placeholder-align="right" text-align="right" v-model='formDataArray[index].formData'></x-input>
              </group>

              <!--text-mobile手机号-->
              <tel v-if="item.type === 'text'&&item.subtype === 'tel' " :item="item" :index="index" :code='code1' :mobile='mobile1' @tel="telChangeSelf" ref="tel"></tel>
              <!--text类型结束-->

              <!--select类型开始-->

              <!--select-select单选-->
              <group v-if="item.type === 'select'&&item.subtype === 'select'" class="no-title" id="popup-radio-warpper">
                <!-- <group-title slot="title" class="group-title">
                  <span>{{item.label}}</span>
                  <span :class="isRequired(item.required)">*</span>
                </group-title> -->
                <popup-radio class='popup-radio' v-if='!!item.required' :title='item.label+`*`' value-text-align='left' :options="transformKey(item.values)" :placeholder="item.description||'选择'+item.label" v-model='formDataArray[index].formData'>

                  <div value-text-align='left' slot="popup-header" class="vux-popup-header vux-1px-b">
                    <div class="vux-popup-header-title">{{item.label}}</div>
                  </div>
                </popup-radio>

                <popup-radio v-if='!item.required' :title='item.label' value-text-align='left' :options="transformKey(item.values)" :placeholder="item.description" v-model='formDataArray[index].formData'>
                  <div value-text-align='left' slot="popup-header" class="vux-popup-header vux-1px-b">
                    <div class="vux-popup-header-title">{{item.label}}</div>
                  </div>
                </popup-radio>
              </group>

              <!--select-country国家-->

              <!--省市区四级联动-->
              <myaddress v-if="item.type === 'select'&&item.subtype === 'country'&&form.fields[index+1].type === 'select'&&form.fields[index+1].subtype === 'city'" :cityData="dataAllCity" :pcOnline="pcOnline" :item="item" :item1="form.fields[index+1]" :index="index" @address="addressChangeSelf" ref="address">
              </myaddress>

              <!--<div v-if="item.type === 'select'&&item.subtype === 'country'&&form.fields[index+1].type === 'select'&&form.fields[index+1].subtype === 'city'">
            {{item.label}}
            {{form.fields[index+1].label}}
          </div>-->
              <!--<myaddress v-if="item.type === 'select'&&item.subtype === 'country'"
                     :cityData="dataAllCity" :pcOnline="pcOnline" :item="item" :index="index"
                     @address="addressChangeSelf" ref="address">

          </myaddress>-->

              <!--select-city城市区三级联动-->

              <!--select类型结束-->

              <!--datatime类型开始-->

              <!--date-datetime 年月日时分秒-->

              <!--date-ymd 年月日-->
              <!-- <group v-if="item.type === 'date'&&item.subtype==='ymd'&&pcOnline" class="pc_date_select">
                <cell>
                  <template slot="title">
                    <span>
                      <span>{{item.label}}</span>
                      <span :class="isRequired(item.required)">*</span>
                    </span>
                  </template>
                  <el-date-picker v-model='formDataArray[index].formData' type="date" default-value="1990-01-01" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择出生日期">
                  </el-date-picker>
                </cell>
              </group>

              <group v-if="item.type === 'date'&&item.subtype==='ymd'&&!pcOnline" class="no-title" ref="date">
                <datetime :title='item.label' default-selected-value="1990-01-01" :start-date="max_birth" :end-date="min_birth" :placeholder="item.description||'选择'+item.label" v-model='formDataArray[index].formData'>
                  <template slot="title">
                    <div>
                      <p>
                        <span>{{item.label}}</span>
                        <span style="position: relative;left: 0px;" :class="isRequired(item.required)">*</span>
                      </p>
                    </div>
                  </template>

                </datetime>
              </group> -->

              <!--datatime-his 完赛事件-->

              <!--datatime类型结束-->

              <!--textarea类型开始-->

              <!--textarea-textarea文本域-->

              <!--textarea类型结束-->

              <!--file类型开始-->
              <!--file-file 文件类型-->
              <!--file-images 图片类型-->
              <upfile v-if="item.type === 'file'&&item.subtype === 'image'" :name="item.label" :placeholder="item.placeholder" :src="`${host}stor/base64`" :required="item.required" :index="index" @fileChange="fileChangeSelf">
              </upfile>

              <!--file-audit 审核类型-->
              <upfile v-if="item.type === 'file'&&item.subtype === 'audit'" :name="item.label" :placeholder="item.placeholder" :src="`${host}stor/base64`" :required="item.required" :index="index" @fileChange="fileChangeSelf" :defaultstate="defaultstate">
              </upfile>

              <!--file类型结束-->

              <!--raidgroup类型开始-->
              <!-- <group v-if="item.type==='radio-group'" class="pc_date_select">
                <cell>
                  <template slot="title">
                    <span style="height:24px;">
                      <span>{{item.label}}</span>
                      <span :class="isRequired(item.required)">*</span>
                    </span>
                  </template>

                </cell>
                <checklist :options="transformKey(item.values)" v-model="formDataArray[index].formData" :max="1"></checklist>
              </group> -->

              <!-- 性别 -->
              <group class='gender' v-if="item.type==='radio-group'&&item.name!='gender'">

                <div v-if='isRequired(item.required)=="required"'>

                  <span>{{item.label}}
                    <span style="float: initial;color:red;position: static;padding-left: 0;">*</span>
                  </span>
                  <checker v-model="formDataArray[index].formData" default-item-class="demo1-item" selected-item-class="demo1-item-selected">
                    <!-- <checker-item v-for="(item1, index1) in item.values" :key='index1' value="item1.value">{{item1.label}}</checker-item> -->
                    <checker-item v-for="(item1, index1) in item.values" :key='index1' :value="item1.value">{{item1.label}}</checker-item>
                    <!-- <checker-item value="5">22</checker-item> -->
                  </checker>

                </div>

                <div v-if='isRequired(item.required)!="required"'>
                  <span>{{item.label}} </span>
                  <checker v-model="formDataArray[index].formData" default-item-class="demo1-item" selected-item-class="demo1-item-selected">
                    <!-- <checker-item v-for="(item1, index1) in item.values" :key='index1' value="item1.value">{{item1.label}}</checker-item> -->
                    <checker-item v-for="(item1, index1) in item.values" :key='index1' :value="item1.value">{{item1.label}}</checker-item>
                    <!-- <checker-item value="5">22</checker-item> -->
                  </checker>

                </div>

              </group>

              <!--raidgroup类型结束-->

              <!--checkbox复选-->

              <!--header表头-->

            </div>

            <!-- <div v-show="!show" class="button-wrapper">
          <x-button type="primary" @click.native="submit()" text="提交">{{$t('form.submit')}}</x-button>
        </div> -->

          </div>

        </div>
      </card>

      <div v-show="show" style="background:white" id="msg">
        <msg class="msg" title="报名已修改" :buttons="buttons" icon="success">
          <template slot="description" slot-scope="props">
            <!--   <div>
                 <p><span>姓名:</span><span v-text="name"></span></p>
                 <p><span>性别:</span><span v-text="sex"></span></p>
                 <p><span>参赛项目:</span><span v-text="project"></span></p>
               </div>-->

            <div>
              <group>
                <cell :title="$t('form.name')" :value="name"></cell>
                <cell-form-preview :list="mylist"></cell-form-preview>
              </group>
              <group v-if="payable==0">
                <div>
                  <cell :title="$t('form.detail')" @click.native="go()" is-link></cell>
                </div>
              </group>

              <group v-if="payable==1">
                <div>
                  <cell :title="$t('form.detail')" @click.native="go()" is-link></cell>
                  <cell v-if="!pay_at" :title="$t('form.pay')" @click.native="pay()" is-link></cell>
                </div>
              </group>
            </div>
          </template>
        </msg>
      </div>

    </view-box>

    <div v-if='pageType=="baoming"' v-show="!show&&formId" class="button_header" id='x-bottom'>
      <x-header class="fixBottomButton" slot="header" style="width: 100%;position: fixed;bottom: 0px;z-index: 100;max-width: 850px;margin: 0 auto;" title="">
        <div slot="overwrite-left"></div>
        <!-- <x-icon @click.native="showMenu=true" slot="overwrite-left" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon> -->
        <div class="rightbottom-button" style="color:#fff;font-size: 18px;" @click="submit" slot="right">确认修改</div>

      </x-header>
      <actionsheet @on-click-menu='menuClick' v-model="showMenu" :menus="menus"></actionsheet>
    </div>

    <div v-if='pageType!="baoming"' v-show="!show&&formId" class="button_header" id='x-bottom'>
      <x-header class="fixBottomButton" slot="header" style="width: 100%;position: fixed;bottom: 0px;z-index: 100;max-width: 850px;margin: 0 auto;" title="">

        <div slot="overwrite-left"></div>
        <div class="rightbottom-button" style="color:#fff;font-size: 18px;" @click="submit" slot="right">确认修改</div>

      </x-header>
      <actionsheet @on-click-menu='menuClick' v-model="showMenu" :menus="menus"></actionsheet>
    </div>

    <!-- <div style="width: 100vw;position: fixed;bottom: 0;" v-show="!show&&formId" id='x-bottom'>
      <x-header @click.native='submit()' slot="header" style="max-width:850px;width:100%;position:absolute;left:0;bottom:0;z-index:100;" title="">
        <span slot="overwrite-left">

        </span>
        <a>确认修改</a>
      </x-header>
    </div> -->

    <!-- <loading :show='showLoading'></loading>-->
  </div>

</template>

<script type="text/ecmascript-6">
//let host = "http://jiangtao.v3.ihuipao.com/";
import { cookie } from "vux";
/* eslint-disable*/
import Vue from "vue";

import Myheader from "@/common/components/myheader.vue";
import Myflow from "@/common/components/myflow.vue";
import Loading from "@/common/components/loading.vue";
import Upfile from "@/common/components/upfile.vue";
import Tel from "@/common/components/tel.vue";
import Myaddress from "@/common/components/address.vue";
import MyFooter from "@/common/components/myfooter.vue";

import { cityData } from "@/common/locales/cityData.js";
import { countryData } from "@/common/locales/countryData1.js";

import { enCountryData } from "@/common/locales/enCountryData1.js";
import { pcCountryData } from "@/common/locales/pcCountryData1.js";
import { pcenCountryData } from "@/common/locales/pcenCountryData1.js";

import { DatePicker, Cascader } from "element-ui";
Vue.use(DatePicker);
Vue.use(Cascader);

import {
  Card,
  XHeader,
  Selector,
  Msg,
  Group,
  Cell,
  XButton,
  XInput,
  Datetime,
  PopupRadio,
  ToastPlugin,
  Scroller,
  XNumber,
  XTextarea,
  Checklist,
  XAddress,
  Divider,
  GroupTitle,
  TransferDom,
  Previewer,
  PopupPicker,
  CellFormPreview,
  ViewBox,
  ConfirmPlugin,
  Checker,
  CheckerItem
} from "vux";

Vue.use(ConfirmPlugin);

// 获取表单数据
import { getForm } from "@/api/getForm.js";
import { sendForm } from "@/api/sendForm.js";
import { sendPay } from "@/api/sendPay.js";
//axios
import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";
import { setTitle } from "@/common/js/main.js";
import mixin from "@/common/js/mixin";
import Bus from "@/common/js/bus.js";
//let clock1 = 1

Vue.use(ToastPlugin, { time: 3000 });
let years = [];
for (var i = 1930; i <= 2015; i++) {
  years.push({
    name: i + "年",
    value: i + ""
  });
}
let months = [];
for (var i = 1; i <= 12; i++) {
  months.push({
    name: i + "月",
    value: i + ""
  });
}
let days = [];
for (var i = 1; i <= 31; i++) {
  days.push({
    name: i + "日",
    value: i + ""
  });
}
export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      code1: "",
      key: "",
      fetchData: [],
      data1: [
        {
          value: "zhinan",
          label: "指南"
        }
      ],
      inviteCode: "", //邀请码
      formName: "",
      state: "",
      showName: "",
      payable: 0,
      pay_at: "",
      mylist: [],
      raceid: "",
      showAddress: false,
      list: [
        { key: "086", value: "+86" },
        { key: "080", value: "+80" },
        { key: "084", value: "+84" },
        { key: "087", value: "+87" }
      ],
      project: "",
      show: false,
      submitData: {},
      title: "默认为空",
      disclaimer: false,
      countryData: "",
      form: {},
      bloodType: "",
      birthDate: "",
      addressData: cityData,
      formDataArray: [],
      showLoading: false,
      formId: 0, //表单id
      name: "", //姓名
      idtype: "", //护照类型
      idnum: "", //证件号
      national: "", //国籍
      country: [], //居住国家
      countryCode: "", //居住国家代码
      province: "", //居住省
      city: "", //居住市
      area: "", //居住区
      address: "", //居住详细地址
      blood: "", //血型
      cloth: "", //尺码
      mobile: "", //手机号码
      email: "", //邮箱
      emername: "", //紧急联系人姓名
      emermobile: "", //紧急联系人电话
      birth: "", //出生日期
      gender: "", //性别
      proving: true, //表单是否通过所有验证规则
      disabled: true, //表单是否禁用 禁用用来展示
      _key: "", //报名表单的key 支付用
      buttons: [], //成功报名提示的按钮
      clock: true,
      max_birth: "",
      min_birth: "",
      isDateFirst: true,
      isAddressFirst: true,
      dataIndex: 0,
      mydate: "",
      pcOnline: false,
      sexlist: [{ key: "male", value: "男" }, { key: "female", value: "女" }],
      phonelist: [
        "+1",
        "+7",
        "+20",
        "+27",
        "+30",
        "+31",
        "+32",
        "+33",
        "+34",
        "+36",
        "+39",
        "+40",
        "+43",
        "+44",
        "+45",
        "+46",
        "+47",
        "+48",
        "+49",
        "+51",
        "+52",
        "+53",
        "+54",
        "+55",
        "+56",
        "+57",
        "+58",
        "+60",
        "+61",
        "+62",
        "+63",
        "+64",
        "+65",
        "+66",
        "+81",
        "+82",
        "+84",
        "+86",
        "+90",
        "+91",
        "+92",
        "+93",
        "+94",
        "+95",
        "+98",
        "+212",
        "+213",
        "+216",
        "+218",
        "+220",
        "+221",
        "+223",
        "+224",
        "+225",
        "+226",
        "+227",
        "+228",
        "+229",
        "+230",
        "+231",
        "+232",
        "+233",
        "+234",
        "+235",
        "+236",
        "+237",
        "+239",
        "+241",
        "+242",
        "+243",
        "+244",
        "+247",
        "+248",
        "+249",
        "+251",
        "+252",
        "+253",
        "+254",
        "+255",
        "+256",
        "+257",
        "+258",
        "+260",
        "+261",
        "+262",
        "+263",
        "+264",
        "+265",
        "+266",
        "+267",
        "+268",
        "+327",
        "+331",
        "+350",
        "+351",
        "+352",
        "+353",
        "+354",
        "+355",
        "+356",
        "+357",
        "+358",
        "+359",
        "+370",
        "+371",
        "+372",
        "+373",
        "+374",
        "+375",
        "+376",
        "+377",
        "+378",
        "+380",
        "+381",
        "+386",
        "+420",
        "+421",
        "+423",
        "+501",
        "+502",
        "+503",
        "+504",
        "+505",
        "+506",
        "+507",
        "+509",
        "+591",
        "+592",
        "+593",
        "+594",
        "+595",
        "+596",
        "+597",
        "+598",
        "+599",
        "+673",
        "+674",
        "+675",
        "+676",
        "+677",
        "+679",
        "+682",
        "+684",
        "+685",
        "+689",
        "+850",
        "+852",
        "+853",
        "+855",
        "+856",
        "+880",
        "+886",
        "+960",
        "+961",
        "+962",
        "+963",
        "+964",
        "+965",
        "+966",
        "+967",
        "+968",
        "+971",
        "+972",
        "+973",
        "+974",
        "+976",
        "+977",
        "+992",
        "+993",
        "+994",
        "+995",
        "+1242",
        "+1246",
        "+1264",
        "+1268",
        "+1345",
        "+1441",
        "+1664",
        "+1670",
        "+1671",
        "+1758",
        "+1784",
        "+1787",
        "+1809",
        "+1876",
        "+1890"
      ],
      yearSelect: "1990",
      years: [years],
      monthSelect: "1",
      months: [months],
      days: [days],
      daySelect: "1",
      countryDataPC: "",
      dataAllCity: [],
      dataProvince: [],
      dataCity: [],
      dataArea: [],
      myjson: "",
      national: "",
      eventid: "",
      selectedOptions2: ["320000", "320200", "320214"],
      listData: [],
      defaultstate: "",
      userKey: ""
    };
  },
  computed: {
    // 一个计算属性的 getter
    sex: function() {
      if (this.gender == "male") {
        return "男";
      } else if (this.gender == "female") {
        return "女";
      }
    }
  },
  beforeCreate() {},
  created() {
    Bus.$on("refresh", target => {
      location.reload();
    });

    let _this = this;

    indexedDB(
      "defaultstate",
      "get",
      this.RACEID,
      "",
      function(a) {
        this.defaultstate = a;
      }.bind(this)
    );

    // console.log(this.$route.params.state)
    // console.log(this.$route.params.eventState)
    // console.log(this.$route.params.idnum)
    // console.log(this.$route.params.eventid)

    //console.log(this.$route.query.userKey)
    this.userKey = this.$route.query.userKey;

    this.message = window.localStorage.getItem("message");

    //获取eventID
    this.eventid = this.$route.query.eventid;
    //获取证件号
    //this.idnum = this.$route.params.idnum;

    this.project = "修改报名";
    //setTitle(this.project);

    //this.state = this.$route.params.state;

    //this.eventState = this.$route.params.eventState;
    //console.log(this.state)

    // if (!this.$route.params.idnum) {
    //   this.$router.push({ path: "/message" });
    // }

    Vue.axios.all([this.userApply(), this.getForm()]).then(
      Vue.axios.spread(function(response1, response2) {
        if (response1.data.code == 200) {
          _this.fetchData = response1.data.data;
          _this.eventState = response1.data.data.eventState;
          _this.state = response1.data.data.state;
          //console.log(_this.fetchData)

          //console.log("---123---");
          //console.log(_this.fetchData);

          _this.key = _this.fetchData._key;
          _this.national = _this.fetchData.national;
          _this.idnum = _this.fetchData.idnum;
          _this.eventid = _this.fetchData.eventid;
          _this.idtype = _this.fetchData.idtype;
          _this.code1 = _this.fetchData.code;
          _this.mobile1 = _this.fetchData.mobile;

          //console.log(_this.code1);
        }
        if (response2.data.code == 200) {
          console.log(response2);
          _this.formId = response2.data.data.form.id;
          _this.formName = response2.data.data.name;
          _this.form = response2.data.data.form;

          //console.log('---')
          //console.log(_this.fetchData)
          //设置默认最小生日
          if (response2.data.data.max_birth != null) {
            _this.max_birth = response2.data.data.max_birth;
          } else {
            _this.max_birth = "1930-01-01";
          }
          //设置默认最大生日
          if (response2.data.data.min_birth != null) {
            _this.min_birth = response2.data.data.min_birth;
          } else {
            _this.min_birth =
              new Date().getFullYear() +
              "-" +
              (new Date().getMonth() + 1) +
              "-" +
              new Date().getDate();
          }

          //如果进来是字符串类型就序列化一下
          if (typeof _this.form.fields == "string") {
            _this.form.fields = JSON.parse(_this.form.fields);
          }

          //生成保存value的数组
          _this.form.fields.forEach(function(item, index) {
            //过滤掉表单的header
            if (_this.form.fields[index].type == "header") {
              _this.form.fields.splice(index, 1);
            }
            let obj = {};
            if (item.type == "date") {
              _this.dataIndex = index;
            }
            _this.formDataArray.push(obj);
            //console.log('---111--')
            //console.log(_this.fetchData)

            for (let key in _this.fetchData) {
              //console.log(item)
              if (key == item.name) {
                if (item.subtype == "tel") {
                  //console.log(item)
                  if (!!_this.fetchData[key]) {
                    let area = _this.fetchData[key].split("-")[0];
                    let tel = _this.fetchData[key].split("-")[1];
                    item.area = [];
                    item.area.push(area);
                    item.tel = tel;
                    //form.fields[index]
                  }
                } else if (item.type == "radio-group") {
                  _this.formDataArray[index].formData = [];
                  //console.log(_this.fetchData[key]);
                  _this.formDataArray[index].formData = _this.fetchData[key];

                  //_this.formDataArray[index].formData.push(_this.fetchData[0][key])
                } else if (item.type == "select" && item.subtype == "select") {
                  _this.formDataArray[index].formData = _this.fetchData[key];
                } else if (item.type == "select" && item.subtype == "country") {
                  //_this.formDataArray[index].formData={}
                  //console.log('country')
                  //console.log(_this.fetchData[0].country)
                  item.country = _this.fetchData.country;

                  //console.log(_this.formDataArray[index].formData)
                  //                    item.country = _this.fetchData[0].country
                  //
                  //                    if (!!_this.fetchData[0].province) {
                  //                      item.province = _this.fetchData[0].province
                  //                    }
                  //
                  //                    if (!!_this.fetchData[0].city) {
                  //                      item.city = _this.fetchData[0].city
                  //                    }
                  //
                  //                    if (!!_this.fetchData[0].area) {
                  //                      item.area = _this.fetchData[0].area
                  //                    }
                } else if (item.type == "select" && item.subtype == "city") {
                  //alert(_this.fetchData.province)
                  //alert(_this.fetchData.city)
                  //alert(_this.fetchData.area)

                  //console.log(item)
                  //console.log(_this.fetchData[0].province)
                  item.province = _this.fetchData.province;
                  item.city = _this.fetchData.city;
                  item.area = _this.fetchData.area;
                } else if (item.type == "file" && item.subtype == "audit") {
                  item.img = _this.fetchData[key];
                } else {
                  _this.formDataArray[index].formData = _this.fetchData[key];
                }
              }
            }
          });
          setTimeout(() => {
            //console.log(document.querySelectorAll(".popup-radio"));
            document.querySelectorAll(".popup-radio").forEach((item, index) => {
              let connect = item.querySelector(".vux-label");
              if (connect.innerHTML.indexOf("*") != -1) {
                connect.innerHTML = connect.innerHTML.replace("*", "");
                connect.innerHTML =
                  connect.innerHTML +
                  `<span style='color:red;padding-left:5px'>*</span>`;
              }
              console.log(connect.innerHTML);
            });
          }, 500);
        }
      })
    );

    //判断手机端还是PC
    if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
      this.pcOnline = false;
    } else {
      this.pcOnline = true;
      this.dataAllCity = data2tree(cityData);
    }

    indexedDB(
      "national",
      "get",
      this.RACEID,
      "",
      function(a) {
        this.national = a;
        if (this.pcOnline) {
          if (
            this.national !== "001" ||
            this.national !== "001081" ||
            this.national !== "001071" ||
            this.national !== "001082"
          ) {
            //this.countryDataPC = pcenCountryData;
            this.countryDataPC = pcCountryData;
          } else {
            this.countryDataPC = pcCountryData;
          }
        } else {
          if (
            this.national !== "001" ||
            this.national !== "001081" ||
            this.national !== "001071" ||
            this.national !== "001082"
          ) {
            this.countryData = enCountryData;
          } else {
            this.countryData = countryData;
          }
        }
      }.bind(this)
    );
    indexedDB(
      "idtype",
      "get",
      this.RACEID,
      "",
      function(a) {
        this.idtype = a;
      }.bind(this)
    );
    indexedDB(
      "raceid",
      "get",
      this.RACEID,
      "",
      function(a) {
        this.raceid = a;
      }.bind(this)
    );
  },
  methods: {
    userApply() {
      return this.axios.post(
        `${host}registration/show`,
        //`${host}user/auth/regitrationfetch`,
        qs.stringify({
          id: this.userKey,
          full: 1
        })
      );
      // if (window.localStorage.getItem("message") == "old") {
      //   return this.axios.post(
      //     `${host}registration/fetch`,
      //     //`${host}user/auth/regitrationfetch`,
      //     qs.stringify({
      //       idnum: this.idnum,
      //       eventid: this.eventid
      //     })
      //   );
      // } else {
      //   return this.axios.post(
      //     //`${host}registration/fetch`,
      //     `${host}user/auth/regitrationfetch`,
      //     qs.stringify({
      //       idnum: this.idnum,
      //       eventid: this.eventid
      //     })
      //   );
      // }
    },
    getForm() {
      return this.axios.post(
        `${window.host}event/show`,
        qs.stringify({
          eventid: this.eventid
        })
      );
    },
    go() {
      if (window.localStorage.getItem("message") == "old") {
        this.$router.push({
          path: `/message?_key=${
            this.key
          }&race_id=${window.localStorage.getItem("raceId")}`
        });
      } else {
        history.go(-1);
      }
    },
    changeCountry(val) {
      if (val[0] == "001") {
        this.showAddress = true;
      } else {
        this.showAddress = false;
      }
      this.countryCode = val[0];
    },
    pay() {
      if (this.payable != 1) {
        this.$vux.toast.show({
          type: "warn",
          text: this.state
        });
        return;
      }

      sendPay(`${window.host}registration/pay`, {
        //raceid: this.raceid,
        id: this._key
      }).then(response => {
        if (response.data.code == "200") {
          window.location.href = response.data.data.url;
        } else {
          //console.log(response)
          this.$vux.toast.show({
            type: "warn",
            text: response.data.msg
          });
        }
      });
    },
    fileChangeSelf(opt) {
      // console.log(opt)
      this.formDataArray[opt.index].formData = opt.files;
    },
    telChangeSelf(opt) {
      //console.log(opt)
      this.formDataArray[opt.index].formData = opt;
    },
    addressChangeSelf(opt) {
      //console.log(opt)
      this.formDataArray[opt.index].formData = opt.data;
    },
    isRequired: function(required) {
      if (required) {
        return "required";
      }
      return "norequired";
    },
    checkMobile: function(str) {
      //验证手机号码
      // console.log(str)
      // console.log(event.target)

      //去除空格
      str = str.replace(/\s+/g, "");
      return {
        valid: /^1[1234567890]\d{9}$/.test(str),
        msg: "请填写符合规则的手机号码"
      };
    },
    confirm() {
      let _this = this;
      //this.state='normal'
      if (this.state == "normal" && this.eventState == "audit") {
        //点击同意
        this.$vux.confirm.show({
          title: "操作提示",
          content:
            "修改报名资料后我们将会对您的资料进行重新审核，您确认要进行这个操作？",
          // 组件除show外的属性
          onCancel() {},
          onConfirm() {
            _this.submit();
          }
        });
      } else {
        _this.submit();
      }
    },
    submit() {
      let _this = this;

      // 验证必选项
      for (let i = 0; i < _this.form.fields.length; i++) {
        this.submitData.idnum = this.idnum;
        //提取报名表ID
        this.submitData.eventid = this.eventid;
        //提取证件类型
        this.submitData.idtype = this.idtype;

        //国籍sub
        this.submitData.national = this.national;

        //处理国家处理
        if (
          _this.form.fields[i].type === "select" &&
          _this.form.fields[i].subtype === "country"
        ) {
          //如果有国家表单就提取国家数据

          this.submitData[_this.form.fields[i].name] =
            _this.formDataArray[i].formData.country;

          //this.submitData[_this.form.fields[i].name] =_this.formDataArray[i]
        } else if (
          _this.form.fields[i].type === "text" &&
          _this.form.fields[i].subtype === "text"
        ) {
          if (_this.form.fields[i].name == "name") {
            this.name = _this.formDataArray[i].formData;
          }
          this.submitData[_this.form.fields[i].name] =
            _this.formDataArray[i].formData;
        } else if (
          _this.form.fields[i].type === "text" &&
          _this.form.fields[i].subtype === "email"
        ) {
          this.submitData[_this.form.fields[i].name] =
            _this.formDataArray[i].formData;
        } else if (
          _this.form.fields[i].type === "select" &&
          _this.form.fields[i].subtype === "city"
        ) {
          //处理省市区数据
          _this.formDataArray[i].formData = {};
          _this.formDataArray[i].formData.province =
            _this.formDataArray[i - 1].formData.province;
          _this.formDataArray[i].formData.city =
            _this.formDataArray[i - 1].formData.city;
          _this.formDataArray[i].formData.area =
            _this.formDataArray[i - 1].formData.area;
          this.submitData[_this.form.fields[i].name] = {};
          this.submitData[_this.form.fields[i].name].province =
            _this.formDataArray[i].formData.province;
          this.submitData[_this.form.fields[i].name].city =
            _this.formDataArray[i].formData.city;
          this.submitData[_this.form.fields[i].name].area =
            _this.formDataArray[i].formData.area;

          if (
            _this.formDataArray[i - 1].formData.country == "001" &&
            !this.submitData[_this.form.fields[i].name].province
          ) {
            this.proving = false;
            _this.$vux.toast.show({
              text: "请选择城市",
              type: "warn"
            });
            return;
          }
        } else if (_this.form.fields[i].type === "radio-group") {
          //处理radio-group类型
          this.submitData[_this.form.fields[i].name] =
            _this.formDataArray[i].formData;
        } else if (
          _this.form.fields[i].type === "select" &&
          _this.form.fields[i].subtype === "select"
        ) {
          this.submitData[_this.form.fields[i].name] =
            _this.formDataArray[i].formData;
        } else if (
          _this.form.fields[i].type === "file" &&
          _this.form.fields[i].subtype === "audit"
        ) {
          this.submitData[_this.form.fields[i].name] =
            _this.formDataArray[i].formData;
        } else if (
          _this.form.fields[i].type === "text" &&
          _this.form.fields[i].subtype === "tel"
        ) {
          if (
            _this.form.fields[i].required &&
            typeof _this.formDataArray[i].formData == "undefined"
          ) {
            _this.$vux.toast.show({
              text:
                `${_this.form.fields[i].label}` + _this.$t("form.mustenter"),
              type: "warn"
            });
            this.proving = false;
          } else {
            this.submitData[_this.form.fields[i].name] =
              _this.formDataArray[i].formData;
          }

          if (typeof this.formDataArray[i].formData == "undefined") {
          } else {
            if (!!_this.formDataArray[i].formData.tel) {
              this.submitData[_this.form.fields[i].name] =
                _this.formDataArray[i].formData.telCode +
                "-" +
                _this.formDataArray[i].formData.tel.replace(/\s+/g, "");
            } else {
            }
          }
        }

        if (
          _this.form.fields[i].required &&
          typeof _this.formDataArray[i].formData == "undefined"
        ) {
          //没有数据
          _this.$vux.toast.show({
            text: `${_this.form.fields[i].label}是必填`,
            type: "warn"
          });
          // 验证未通过
          this.proving = false;
          return;
        }

        //审核报名资料必填 如果是审核状态并且有审核的资料
        if (
          this.defaultstate == "audit" &&
          _this.form.fields[i].type === "file" &&
          _this.form.fields[i].subtype === "audit"
        ) {
          if (!_this.formDataArray[i].formData) {
            //没有数据
            _this.$vux.toast.show({
              text: `${_this.form.fields[i].label}是必填`,
              type: "warn"
            });
            // 验证未通过
            this.proving = false;
            return;
          } else if (_this.formDataArray[i].formData.length == 0) {
            //没有数据
            _this.$vux.toast.show({
              text: `${_this.form.fields[i].label}是必填`,
              type: "warn"
            });
            // 验证未通过
            this.proving = false;
            return;
          } else {
          }
        } else if (_this.form.fields[i].name === "birth") {
          /*       else if (_this.form.fields[i].name === 'mobile') {
           //电话
           if (typeof(_this.formDataArray[i].formData) !== "undefined") {
           this.submitData.mobile = _this.formDataArray[i].formData.telCode + '-' + _this.formDataArray[i].formData.tel.replace(/\s+/g, "")
           } else {
           this.submitData.mobile = ''
           }
           }*/

          //          else if (_this.form.fields[i].name === 'email') {
          //            //邮件
          //            if (typeof(_this.formDataArray[i].formData) !== "undefined") {
          //              this.submitData.email = _this.formDataArray[i].formData
          //            } else {
          //              this.submitData.email = ''
          //            }
          //          } else if (_this.form.fields[i].name === 'emername') {
          //            //紧急联系人姓名
          //            if (typeof(_this.formDataArray[i].formData) !== "undefined") {
          //              this.submitData.emername = _this.formDataArray[i].formData
          //            } else {
          //              this.submitData.emername = ''
          //            }
          //          }

          /*          else if (_this.form.fields[i].name === 'emermobile') {
           //紧急联系人电话

           if (typeof(_this.formDataArray[i].formData) !== "undefined") {
           this.submitData.emermobile = _this.formDataArray[i].formData.telCode + '-' + _this.formDataArray[i].formData.tel.replace(/\s+/g, "")
           } else {
           this.submitData.emermobile = ''
           }
           } */

          //生日
          //在PC端取PC得值
          /*      if (this.pcOnline) {
             this.submitData.birth = this.yearSelect + '-' + this.addZero(this.monthSelect) + '-' + this.addZero(this.daySelect)
             this.formDataArray[i].formData = this.submitData.birth
             console.log(this.submitData.birth)
             } else {
             if (typeof(_this.formDataArray[i].formData) !== "undefined") {
             this.submitData.birth = _this.formDataArray[i].formData
             } else {
             this.submitData.birth = ''
             }
             }*/
          if (typeof _this.formDataArray[i].formData !== "undefined") {
            this.submitData.birth = _this.formDataArray[i].formData;
          } else {
            this.submitData.birth = "";
          }
        }

        //提取
        if (_this.form.fields[i].name === "gender") {
          this.gender = _this.formDataArray[i].formData;
        }

        //提交的时候更新tel
        if (_this.form.fields[i].subtype === "tel") {
          this.$refs.tel.forEach(function(item, index) {
            if (item.index === i) {
              if (!!item.formData) {
              } else {
                item.formData = "";
              }
              // console.log(item.formData);
              _this.formDataArray[i].formData = {
                telCode: item.telCode,
                tel: item.formData.replace(/\s+/g, "")
              };
            }
          });
        }

        if (_this.form.fields[i].required) {
          // console.log(_this.formDataArray)
          if (
            _this.form.fields[i].subtype == "address" &&
            _this.countryCode != "001"
          ) {
            _this.formDataArray[i][0] = "";
            _this.formDataArray[i][1] = "";
            _this.formDataArray[i][2] = "";
          } else {
            //              if (!_this.formDataArray[i].formData || _this.formDataArray[i].formData.length === 0) {
            //
            //                _this.$vux.toast.show({
            //                  text: `${_this.form.fields[i].label}` + _this.$t('form.mustenter'),
            //                  type: 'warn'
            //                })
            //                // 验证未通过
            //                this.proving = false
            //                return
            //              }
          }

          // 验证手机号码
          if (
            _this.form.fields[i].subtype === "tel" &&
            _this.formDataArray[i].formData.telCode[0] == "+86" &&
            !/^1[1234567890]\d{9}$/.test(_this.formDataArray[i].formData.tel)
          ) {
            _this.$vux.toast.show({
              text:
                `${_this.form.fields[i].label}` + _this.$t("form.telnotlegal"),
              type: "warn"
            });
            // 验证未通过
            this.proving = false;
            return;
          }
          // 验证邮箱
          if (
            _this.form.fields[i].subtype === "email" &&
            !/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(
              _this.formDataArray[i].formData
            )
          ) {
            //console.log('---')
            //console.log((/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(_this.formDataArray[i].formData)))
            //console.log(_this.formDataArray[i].formData)
            _this.$vux.toast.show({
              text:
                `${_this.form.fields[i].label}` +
                _this.$t("form.addressnotlegal"),
              type: "warn"
            });
            // 验证未通过
            this.proving = false;
            return;
          }

          this.proving = true;
        } else {
          //验证手机号码
          if (
            _this.form.fields[i].subtype === "tel" &&
            typeof _this.formDataArray[i].formData !== "undefined" &&
            this.formDataArray[i].formData.telCode === "086"
          ) {
            //console.log(_this.formDataArray[i].formData);
            if (_this.formDataArray[i].formData.tel == "") {
            } else {
              if (
                !/^1[1234567890]\d{9}$/.test(
                  _this.formDataArray[i].formData.tel
                )
              ) {
                _this.$vux.toast.show({
                  text:
                    `${_this.form.fields[i].label}` +
                    _this.$t("form.telnotlegal"),
                  type: "warn"
                });
                this.proving = false;
                return;
              }
            }
          }
        }
      }

      if (this.submitData.emermobile === this.submitData.mobile) {
        _this.$vux.toast.show({
          text: "本人联系号码与紧急联系人号码不能相同",
          type: "warn"
        });
        this.proving = false;
        return;
      }

      if (!this.proving) {
        return;
      }

      // 把提交的数据转成formdata格式

      //开启loading动画

      // _this.$vux.loading.show({
      //   text: '提交中'
      // })
      /* for (let key in this.submitData) {
         if (this.submitData[key] == '' || this.submitData[key].indexOf('+') == 0) {
         delete this.submitData[key];
         }
         }*/

      this.submitData.id = _this.key;

      for (let key in this.submitData) {
        if (this.submitData[key] == "") {
          delete this.submitData[key];
        }
      }
      //console.log(this.submitData)

      /*

      eventid: 185
name: 测试11
gender: male
birth: 1990-01-01
mobile: +86-13912354945
id: 5b3050956110c
_sid: 6HCfAQZLep3Q4KtNYUTmLD3zyKlCWDRFiRsezAAX
_lang: tw
_channel: undefined


eventid: 185
idtype: other
idnum: 23111111
national: 001071
name: 测试1122
gender: male
birth: 1990-01-01
mobile: +86-13912354945
id: 5b304fbd9ab19
_sid: IS90kwoQYs4CU0uWNqhCyHk0XdTvkqeDHLuheHry
_lang: tw
_channel: undefined



      */

      if (this.message == "old") {
        sendForm(`${host}registration/edit`, this.submitData).then(
          ///sendForm(`${host}user/auth/regitration/edit`, this.submitData).then(
          response => {
            //取消loading动画
            // this.$vux.loading.hide()
            //state
            // 展示报名成功页面
            //console.log(this.submitData)

            if (response.data.code == "200") {
              indexedDB("inviteCode", "remove", this.RACEID, "", a => {});
              indexedDB(
                "IDNumber",
                "set",
                this.RACEID,
                this.idnum,
                function() {}
              );
              if (this.state == "normal") {
                this.state = this.$t("message.normal");
              } else if (this.state == "wait") {
                if (response.data.data.pos) {
                  //候补 有post人数
                  this.state = `正在候补(前边有${response.data.data.pos}人)`;
                } else {
                  this.state = `正在候补`;
                }
              } else if (this.state == "draw") {
                this.state = `等待抽签`;
              } else if (this.state == "undraw") {
                this.state = `未中签(候补代码${response.data.data.wait_post})`;
              } else if (this.state == "audit") {
                this.state = `审核中`;
              } else if (this.state == "unaudit") {
                this.state = `未通过审核(${response.data.data.refusemsg})`;
              }

              this.mylist.push({
                label: this.$t("message.status"),
                value: this.state
              });

              this.mylist.push({
                label: this.$t("index.gender"),
                value: this.sex
              });

              this.mylist.push({
                label: this.$t("index.project"),
                value: this.formName
              });

              this.show = true;

              this._key = response.data.data._key;
              if (response.data.data.payable != 1) {
                //不进入支付流程 跳转报名信息展示
                this.payable = 0;
                this.pay_at = response.data.data.pay_at;
                /*   _this.buttons.push({
               type: 'default',
               text: '去支付',
               })*/
              } else if (response.data.data.payable === 1) {
                //可以进入支付流程
                this.payable = 1;
                this.pay_at = response.data.data.pay_at;
                /*    _this.buttons.push({
               type: 'primary',
               text: '去支付',
               onClick: this.pay.bind(this)
               })*/
              }
            } else {
              //提示错误信息
              // _this.$vux.toast.show({
              //   type: "warn",
              //   text: response.data.msg
              // });
            }
          }
        );
      } else {
        //sendForm(`${host}registration/edit`, this.submitData).then(
        sendForm(`${host}user/auth/regitration/edit`, this.submitData).then(
          response => {
            //取消loading动画
            // this.$vux.loading.hide()
            //state
            // 展示报名成功页面
            //console.log(this.submitData)

            if (response.data.code == "200") {
              indexedDB("inviteCode", "remove", this.RACEID, "", a => {});
              indexedDB(
                "IDNumber",
                "set",
                this.RACEID,
                this.idnum,
                function() {}
              );
              if (this.state == "normal") {
                this.state = this.$t("message.normal");
              } else if (this.state == "wait") {
                if (response.data.data.pos) {
                  //候补 有post人数
                  this.state = `正在候补(前边有${response.data.data.pos}人)`;
                } else {
                  this.state = `正在候补`;
                }
              } else if (this.state == "draw") {
                this.state = `等待抽签`;
              } else if (this.state == "undraw") {
                this.state = `未中签(候补代码${response.data.data.wait_post})`;
              } else if (this.state == "audit") {
                this.state = `审核中`;
              } else if (this.state == "unaudit") {
                this.state = `未通过审核(${response.data.data.refusemsg})`;
              }

              this.mylist.push({
                label: this.$t("message.status"),
                value: this.state
              });
              this.mylist.push({
                label: this.$t("index.gender"),
                value: this.sex
              });
              this.mylist.push({
                label: this.$t("index.project"),
                value: this.formName
              });

              this.show = true;

              this._key = response.data.data._key;
              if (response.data.data.payable != 1) {
                //不进入支付流程 跳转报名信息展示
                this.payable = 0;
                this.pay_at = response.data.data.pay_at;
                /*   _this.buttons.push({
               type: 'default',
               text: '去支付',
               })*/
              } else if (response.data.data.payable === 1) {
                //可以进入支付流程
                this.payable = 1;
                this.pay_at = response.data.data.pay_at;
                /*    _this.buttons.push({
               type: 'primary',
               text: '去支付',
               onClick: this.pay.bind(this)
               })*/
              }
            } else {
              //提示错误信息
              _this.$vux.toast.show({
                type: "warn",
                text: response.data.msg
              });
            }
          }
        );
      }
    },
    change() {},
    getNumber(str) {
      return str | 0;
    },
    transformKey(array) {
      let myArray = [];
      array.forEach((item, index) => {
        let obj = {};
        obj.key = item.value;
        obj.value = item.label;
        myArray.push(obj);
      });
      return myArray;
    },
    fileUp(event, index) {
      // if(event.target=='')
      // console.log(event.target[0] === 'div')
      event.currentTarget.children[1].click();
    },
    fileChange(event, index) {
      // console.log(this.$refs.file)
      // console.log(event.target.files[0])
      event.target.parentNode.children[0].innerHTML = `<p>文件名：${
        event.target.files[0].name
      }  大小：${((event.target.files[0].size / 1024 / 1024 * 100) | 0) /
        100}M</p>`;
      // console.log(this.getIndex(event.target))
    },
    getIndex(element) {
      return Array.prototype.slice
        .call(document.querySelectorAll('input[type="file"]'))
        .indexOf(element);
    },
    checkRequired(required) {
      if (required) {
        return true;
      }
      return false;
    },
    onChangePC(val) {
      if (val == "001") {
        this.showAddress = true;
      } else {
        this.showAddress = false;
      }
      this.countryCode = val;
    },
    selectCity: function(e) {
      this.dataCity = this.dataAllCity[e.target.value].children;
      this.dataArea = this.dataCity[0].children;
      this.dataAllCity[0].value = this.dataAllCity[e.target.value].value;
    },
    selectArea: function(e) {
      this.dataArea = this.dataCity[e.target.value].children;
      this.dataCity[0].value = this.dataCity[e.target.value].value;
    },
    trueArea: function(e) {
      this.dataArea[0].value = this.dataArea[e.target.value].value;
    },
    addZero(a) {
      if (a < 10) {
        return 0 + a;
      } else {
        return a;
      }
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Checker,
    CheckerItem,
    Card,
    XHeader,
    Tel,
    Divider,
    Myheader,
    Myflow,
    Group,
    Cell,
    XButton,
    XInput,
    Datetime,
    PopupRadio,
    ToastPlugin,
    Scroller,
    XNumber,
    XTextarea,
    Checklist,
    XAddress,
    Loading,
    Upfile,
    GroupTitle,
    Msg,
    Selector,
    PopupPicker,
    CellFormPreview,
    MyFooter,
    ViewBox,
    Myaddress
  }
};
function data2tree(datas) {
  var dataArray = [];
  datas.forEach(function(data) {
    var parent = data.parent;
    if (!parent) {
      var name = data.name;
      var value = data.value;
      var objTemp = {
        label: name,
        value: value,
        parent: parent
      };
      dataArray.push(objTemp);
    }
  });
  data2treeDG(datas, dataArray);
  return dataArray;
}
function data2treeDG(datas, dataArray) {
  for (var j = 0; j < dataArray.length; j++) {
    var dataArrayIndex = dataArray[j];
    var childrenArray = [];
    var CATL_CODEP = dataArrayIndex.value;
    for (var i = 0; i < datas.length; i++) {
      var data = datas[i];
      var parent = data.parent;
      if (parent == CATL_CODEP) {
        //判断是否为儿子节点
        var name = data.name;
        var value = data.value;
        var objTemp = {
          label: name,
          value: value,
          parent: parent
        };
        childrenArray.push(objTemp);
      }
    }
    if (childrenArray.length > 0) {
      dataArrayIndex.children = childrenArray;
    }

    if (childrenArray.length > 0) {
      //有儿子节点则递归
      data2treeDG(datas, childrenArray);
    } else {
    }
  }
  return dataArray;
}

//修改颜色
window.onload = function() {
  setTimeout(() => {
    var list = document.querySelectorAll(".weui-select");
    //console.log('-+')
    //console.log(list)
    list.forEach(item => {
      item.style.color = "#ccc";
    });
  }, 0);
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
#form .popup-radio .weui-cell_access .weui-cell__ft {
  padding-right: 0;
}

#form .gender .vux-no-group-title {
  position: relative;
  text-align: right;
  padding-right: 15px;
  height: auto;
  min-height: 44px;
}

#form .gender .vux-no-group-title span {
  padding-left: 15px;
  line-height: 44px;
}

#my_form {
  padding-bottom: 50px;
}
#my_form .weui-cells__title {
  font-size: 17px;
}

#form .popup-radio .weui-cell__ft {
  text-align: right;
  width: 100%;
}

#form .telcode .weui-cell__ft {
  display: none;
}

#my_form .weui-tab {
  position: static;
}

#my_form .weui-tab__panel {
  padding-bottom: 0;
}

#form .norequired {
  display: none;
}

#form .required {
  //display: inline-block;
  color: #f43530;
}

#form #popup-radio-warpper .group-title {
  position: relative;
  top: 20px;
  z-index: 9;
  height: 0;
  color: #000;
  font-size: 17px;
  pointer-events: none;
}

#form .vux-label {
  width: 8em;
}

#form .demo1-item {
  border: 1px solid #ccc;
  color: #ccc;
  padding: 3px;
  padding-left: 20px;
  padding-right: 20px;
}

#form .demo1-item-selected {
  border: 1px solid #ccc;
  background: #26a2ff;
  color: #fff;
}

#form #number-warpper .group-title {
  position: relative;
  top: 20px;
  z-index: 9;
  height: 0;
  color: #000;
  font-size: 17px;
}

#form #number-warpper .weui-cell {
  height: 24px;
}

#my_form.modify .weui-msg {
  padding-top: 100px;
}

.msg .weui-msg__desc p {
  line-height: 1.5;
}

#form .mask {
  width: 100%;
  height: 100vh;
  background: red;
  position: absolute;
}

#form .pc_country_select .vux-no-group-title {
  padding-top: 10px;
  padding-bottom: 10px;
}

#form .tel .vux-x-input {
  padding: 0;
}

#form .tel .weui-select {
  width: 105px;
  box-sizing: border-box;
}

#form .tel .weui-cell__primary {
  padding-left: 15px;
}

#form .tel .vux-x-input .vux-selector:after {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid #e5e5e5;
  color: #e5e5e5;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}

#form input {
  font-size: 17px;
}

#form .weui-cell.popup-radio .vux-cell-bd {
  max-width: 8em;
}

// #form .popup-radio .weui-cell__ft:after {
//   display: none;
// }

// #form .telcode .weui-cell__ft {
//   display: none;
// }

#form .pc_date_select .weui-cell__ft {
  width: 100%;
}

#form .pc_date_select .vux-cell-bd {
  max-width: 8em;
}

#msg .weui-cell {
  text-align: left;
}

#msg .weui-msg__text-area {
  padding: 0;
}

.pc_date_select select {
  background-color: #ffffff;
  background-image: none !important;
  filter: none !important;
  border: 1px solid #e5e5e5;
  outline: none;
  width: 100px;
  height: 25px;
  line-height: 25px;
}

.choosecitys .weui-cell__ft {
  width: 100%;
}

.pc_address_select select {
  background-color: #ffffff;
  background-image: none !important;
  filter: none !important;
  border: 1px solid #e5e5e5;
  outline: none;
  width: 180px;
  height: 25px;
  line-height: 25px;
}

.pc_country_select .weui-cell_select-after .weui-select {
  padding-left: 15px;
}

#form .pc_country_select .weui-label {
  width: 8em;
}

#form .vue-uploader .add + .add {
  margin-left: 10px;
}

#form .vue-uploader .file-list {
  padding-left: 5px;
}

#form .weui-cells__title {
  color: #000;
}

//flag 清除cells间距
#form .weui-cells {
  margin-top: 0;
}

#form .weui-cells:before {
  display: none;
}

#form #tel .tel .weui-cell__hd:after {
  display: none;
}

#form .tel .telcode .weui-cell {
  padding: 0;
}

.pc_country_select {
  select {
    direction: rtl;
  }
  option {
    direction: ltr;
  }
}

#form .vux-datetime {
  & > div > div {
    //font-size: 0
  }
  & > div > div > p {
    width: 8em;
  }
  & > div > div > p > span {
    font-size: 17px;
  }
  .vux-datetime-value {
    font-size: 17px;
    text-align: right;
  }
  // .weui-cell__ft:after {
  //   display: none;
  // }
  .vux-cell-value {
    font-size: 17px;
  }
  .vux-cell-placeholder {
    font-size: 17px;
  }
}
</style>
<style type="text/css" scoped="scoped">
@media screen and (min-width: 850px) {
  .vux-popup-dialog {
    position: absolute;
    top: 20%;
    left: 50%;
    bottom: auto;
    width: 850px;
    margin-left: -425px;
    margin-top: 100px;
  }

  .dp-container {
    position: absolute;
    top: 20%;
    left: 50%;
    bottom: auto;
    width: 850px;
    margin-left: -425px;
    margin-top: 100px;
  }

  .scroller-component {
    overflow-y: scroll;
  }
}
</style>



